<template>
  <div class="layout-footer">
    <div class="footer-content">
      <div class="partner-wrapper">
        <div
          class="partner-item"
          v-for="(item, index) in indexPic.coop_com_two"
          :key="index"
          @click="open(item)"
        >
          <img :src="apiUrl + item.pic" />
        </div>
      </div>

      <div class="footer-bottom">
        <div class="service-wrapper">
          <icon name="phone" />

          <div class="service-info">
            <div class="service-item">客服电话：{{ config.p_phone }}</div>
            <div class="service-item">
              (周一至周五) 09:00-17:00
            </div>
            <div class="service-item">企业QQ：{{ config.p_qq }}</div>
          </div>
        </div>

        <div class="qrcode-wrapper">
          <img :src="config.p_wechat" />
          <div class="text">关注企业微信</div>
        </div>

        <div class="normal-wrapper">
          <div class="normal-title">新手指南</div>
          <!-- <div class="normal-item">会员注册开户流程</div> -->
          <div class="normal-item" @click="$router.push('/help')">常见问题</div>
        </div>
        <div class="normal-wrapper">
          <div class="normal-title">平台声明</div>
          <div class="normal-item" @click="go('p_fuwuxieyi', '平台服务协议')">
            平台服务协议
          </div>
          <div class="normal-item" @click="go('p_zongze', '平台总则')">
            平台总则
          </div>
          <div class="normal-item" @click="go('p_mianze', '免责声明')">
            免责声明
          </div>
          <div class="normal-item" @click="go('p_yinsi', '隐私声明')">
            隐私声明
          </div>
          <!-- <div class="normal-item" @click="go('')">知识产权声明</div> -->
        </div>
        <div class="normal-wrapper">
          <div class="normal-title">公司信息</div>
          <div class="normal-item" @click="go('p_intro', '公司介绍')">
            公司介绍
          </div>
          <div class="normal-item" @click="go('p_culture', '企业文化')">
            企业文化
          </div>
          <div class="normal-item" @click="go('p_quali', '公司资质')">
            公司资质
          </div>
          <div class="normal-item" @click="go('p_connect', '联系我们')">
            联系我们
          </div>
        </div>
      </div>

      <div class="footer-links">
        <div class="copyright">
          版权所有 © {{ config.p_co }} | {{ config.p_icp }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    go(type, name) {
      this.$router.push("/static?type=" + type + "&name=" + name);
    },
    open(item) {
      window.open(item.url);
    }
  }
};
</script>

<style lang="less" scoped>
@border-color: #f2f2f2;
.layout-footer {
  .footer-content {
    width: @base-width;
    margin: 16px auto 0;
    border-bottom: 1px solid @border-color;

    .partner-wrapper {
      padding: 28px 120px;
      display: flex;
      justify-content: space-around;
      background: @white;
      .partner-item {
        width: 180px;
        border: 1px solid @border-color;
        height: 84px;
        padding: 0px 16px;
        cursor: pointer;
        line-height: 84px;
      }
    }

    .footer-bottom {
      margin-top: 16px;
      background: #555556;
      color: @white;
      display: flex;
      padding: 50px 40px 20px 0;
      justify-content: center;

      .service-wrapper {
        display: flex;
        align-items: center;

        .icon-phone {
          width: 36px;
          height: 36px;
        }

        .service-info {
          margin-left: 12px;
          .service-item {
            font-size: 16px;
            padding: 4px 0;
          }
        }
      }

      .qrcode-wrapper {
        margin-left: 60px;
        text-align: center;
        font-size: 16px;

        img {
          width: 120px;
          margin-bottom: 8px;
        }
      }

      .normal-wrapper {
        margin-left: 80px;
        .normal-title {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 8px;
        }

        .normal-item {
          font-size: 16px;
          margin-bottom: 8px;
          cursor: pointer;
        }
      }
    }
  }

  .footer-links {
    background: #555556;
    text-align: center;
    color: @white;
    padding: 0 0 20px 0;

    .copyright {
      font-size: 14px;
    }
  }
}
</style>
